<template>
  <div v-loading="loading" :style="{width: '100%', height: height}">
    <v-chart
      :option="chartOption" style="width:100%;height:100%;"
      :theme="chartTheme" autoresize
    ></v-chart>
  </div>
</template>

<script>
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'line-chart',
  mixins: [MixinVchartTheme],
  props: {
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      },
    },
    lines: {
      type: Array,
      default () {
        return []
      },
    },
    unitName: {
      type: String,
      default: '吨标准煤'
    },
    height: {
      type: String,
      default: '400px'
    },
    showLegend: {
      type: Boolean,
      default: true,
    },
    defaultSelectAllLegend: Boolean,
    title: String,
    downloadFunc: Function,
    showDownloadTool: {
      type: Boolean,
      default: true,
    },
    grid: {
      type: Object,
      default () {
        return {
          top: '17%'
        }
      }
    }
  },
  data () {
    return {
      loading: true,
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    chartOption () {
      const { xData, yData, lines, unitName, showLegend, title, showDownloadTool, defaultSelectAllLegend } = this
      const selected = (lines) => {
        const length = lines.length
        if (length > 2) {
          return {
            selected: lines.reduce((acc, v, i) => {
              if (i < length - 2) {
                acc[v] = false
              }
              return acc
            }, {})
          }
        }
        return {}
      }
      const settingSelectedLegend = defaultSelectAllLegend ? {} : selected(lines)
      return {
        title: {
          text: title,
          textStyle: {
            fontSize: '1.2rem',
            fontWeight: 'normal'
          },
          left: 'center'
        },
        legend: {
          left: 'center',
          top: '8%',
          data: lines,
          show: showLegend,
          ...settingSelectedLegend,
        },
        grid: this.grid,
        toolbox: {
          show: true,
          right: '5%',
          feature: {
            dataView: {
              show: true,
              readOnly: true
            },
            magicType: {
              show: true,
              type: ['line', 'bar'],
            },
            myDownload: {
              show: showDownloadTool,
              title: '导出数据',
              icon: 'path://M753.66001 334.184121c0-4.48904 0.498782-8.479299 0.498782-12.968339 0-133.673648-108.734535-242.906965-242.906965-242.906965-133.673648 0-242.906965 108.734535-242.906965 242.906965 0 6.48417 0.498782 12.968339 0.997565 19.951291-97.761325 20.450073-170.084754 107.73697-170.084754 208.989771 0 117.712616 95.766196 213.478811 213.478811 213.478811 9.975645 0 89.282026 0.498782 89.282026 0.498782l0 0c8.479299 0 14.963468-6.48417 14.963468-14.963468 0-8.479299-6.48417-14.963468-14.963468-14.963468-0.498782 0-1.496347 0-1.995129 0-12.968339 0-78.308816-0.498782-87.286897-0.498782-101.252801 0-183.551875-82.299075-183.551875-183.551875 0-91.277155 68.333171-169.585972 158.612762-181.556746l14.963468-1.995129-1.995129-14.963468c-1.496347-9.975645-1.995129-20.450073-1.995129-29.926936 0-117.213833 95.267414-212.980029 212.980029-212.980029s212.980029 95.267414 212.980029 212.980029c0 8.479299-0.498782 16.459815-1.496347 25.437896l-1.995129 16.958597 16.958597 0 0.997565 0c102.250365 0 185.048222 82.797857 185.048222 185.048222S840.448125 733.209937 738.197759 733.209937c-2.493911 0-8.479299 0-16.958597 0-19.951291 0.498782-66.338042 0.997565-72.822211 0.498782-7.980516-0.997565-15.46225 4.48904-16.958597 12.968339-0.997565 7.980516 4.48904 15.961033 12.968339 16.958597 2.992694 0.498782 9.476863 0.498782 20.450073 0.498782 12.968339 0 31.922065 0 56.861179-0.498782 8.479299 0 14.464686 0 16.459815 0 118.71018 0 214.975158-96.264978 214.975158-214.975158C953.172918 434.938139 864.888456 341.665855 753.66001 334.184121z M615.996103 798.051632l-74.318558 74.318558 0-295.279104c0-8.479299-6.48417-14.963468-14.963468-14.963468s-14.963468 6.48417-14.963468 14.963468L511.750609 872.868972l-74.81734-74.81734c-5.985387-5.985387-15.46225-5.985387-20.948855 0-5.985387 5.985387-5.985387 15.46225 0 20.948855l97.761325 97.761325c0.498782 0.997565 0.997565 1.496347 1.995129 1.995129 2.992694 2.992694 6.982952 4.48904 10.474428 4.48904 0 0 0 0 0 0 0 0 0 0 0 0 0.997565 0 1.995129 0 2.992694-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.997565 0.498782 0 0.997565-0.498782 0.997565-0.498782 1.496347-0.997565 2.992694-2.493911 3.990258-3.990258l97.761325-97.761325c5.985387-5.985387 5.985387-15.46225 0-20.948855C630.959571 792.066245 621.482708 792.066245 615.996103 798.051632z M541.677545 184.050658c0-8.479299-6.48417-14.963468-14.963468-14.963468-88.284462 0-160.607891 71.824647-160.607891 160.607891 0 8.479299 6.48417 14.963468 14.963468 14.963468s14.963468-6.48417 14.963468-14.963468c0-71.824647 58.357526-130.680955 130.680955-130.680955C534.694593 199.014126 541.677545 192.529956 541.677545 184.050658z',
              onclick: (e) => {
                this.downloadFunc && this.downloadFunc()
              }
            },
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          valueFormatter: value => value != null ? `${value} ${unitName}` : '-'
        },
        xAxis: {
          type: 'category',
          data: xData,
        },
        yAxis: {
          type: 'value',
          name: unitName,
          axisLabel: {
            show: true
          },
          axisLine: {
            show: true,
          },
        },
        series: [
          ...lines.map((v, i) => ({
            type: 'line',
            smooth: true,
            name: v,
            ...(lines.length < 2
              ? {
                  itemStyle: {
                    color: this.themeColor
                  }
                }
              : {}),
            data: yData[i],
          }))
        ]
      }
    },
  },
  methods: {
    setLoading (loading) {
      this.loading = loading
    },
  },
  beforeDestroy () {
    erd.removeAllListeners(this.$refs.container)
  },
  mounted () {
    const chart = this.$refs.chart
    const container = this.$refs.container
    erd.listenTo(container, function () {
      chart.resize({
        animation: {
          duration: 1000,
        }
      })
    })
  },
}
</script>
